.hero-card {
  margin-left: auto;
  margin-right: auto;
  max-width: $featured-card-size;

  @include media-query('masonry') {
    max-width: none;
  }
}

.hero-card__inner {
  display: block;

  @include media-query('masonry') {
    display: grid;
    grid-template-columns: 2fr 3fr;
  }
}

.hero-card__inner-wide {

  @include media-query('masonry') {
    display: grid;
    grid-template-columns: 3fr 2fr;
  }

  .type--h1 p {
    padding-top: 1.5rem;
  }
}
